<template>
    <view>
        <uni-list>
            <uni-list-chat :title="wwdUser.nickname"
                           :note="wwdUser.genderDictName"
                           :avatar="userInfo.avatar" link to="/pages/user/user-tab"/>
        </uni-list>
        <uni-group>
            <uni-grid :column="4" style="text-align: center" :showBorder="false" :square="true"
                      @change="gridChange">
                <uni-grid-item :index="0">
                    <text class="iconfont icon-xin11 st-font-size-30-px st-line-height-1"></text>
                    <text class="text">有意思</text>
                </uni-grid-item>
                <uni-grid-item :index="1">
                    <text class="iconfont icon-xin11 st-font-size-30-px st-line-height-1"></text>
                    <uni-badge size="small" :text="visitCount" :offset="[15,-5]"  absolute="rightTop" type="error">
                        <text class="text">访问记录</text>
                    </uni-badge>
                </uni-grid-item>
                <uni-grid-item :index="2">
                    <text class="iconfont icon-xin11 st-font-size-30-px st-line-height-1"></text>
                    <text class="text">我的卡片</text>
                </uni-grid-item>
                <uni-grid-item :index="3">
                    <text class="iconfont icon-xin11 st-font-size-30-px st-line-height-1"></text>
                    <text class="text">我的邀请</text>
                </uni-grid-item>
            </uni-grid>
        </uni-group>
        <uni-list>
            <uni-list-item title="我的主页" link
                           :to="'/pages/detail/detail?userId='+this.userInfo.id"></uni-list-item>
            <uni-list-item title="复制我的信息" link to="/pages/user/copy-info"/>
<!--            <uni-list-item title="消息" link to="/pages/user/message"/>-->
            <uni-list-item title="邀请码" v-show="inviteCode" :rightText="inviteCode"
                           @tap="$utils.copy('靠谱单身邀请码：'+ inviteCode)" clickable/>
        </uni-list>
        <uni-list>
            <uni-list-item title="设置" link to="/pages/user/setting"/>
        </uni-list>
        <login-popup ref="loginPopup" :auto-popup="true" :mask-click="false"></login-popup>
    </view>
</template>

<script>
    import {mapState} from 'vuex'
    import LoginPopup from "../../components/login/LoginPopup.vue";

    export default {
        components: {LoginPopup},
        computed: {
          ...mapState([
            'userInfo','hasLogin'
          ])
        },
        data() {
            return {
                gridOps: [
                    {url: '/pages/user/enjoy'},
                    {url: '/pages/user/my-visit'},
                    {url: '/pages/user/my-card'},
                    {url: '/pages/user/invited-friends'},
                ],
                inviteCode: null,
                visitCount: 0,
                wwdUser: {id: null}
            }
        },
        onReady() {
            console.log("onReady")

        },
        onLoad() {
          // 没有登录加载没有意义
          if (this.hasLogin) {
            this.getDetail()
            this.getInviteCode()
          }
        },
        onUnload() {
            console.log("onUnload")
        },
        onHide() {
            console.log("onHide")
        },
        onShow() {
            console.log('onShow');
            this.getVisitMe()
        },
        onLaunch() {
            console.log('onLaunch');
        },
        onTabItemTap(e) {
            console.log('onTabItemTap');
            uni.setStorageSync('tabItemIndex', e.index)
        },
        methods: {

            getDetail() {
                this.$http.get('/user-info/userId/' + this.userInfo.id).then(res => {
                    this.wwdUser = res.data
                }).catch(() => {
                }).finally(() => {
                })
            },
            gridChange(e) {
              uni.navigateTo({
                url: this.gridOps[e.detail.index].url
              })
            },
            goDetail() {
                uni.navigateTo({
                    url: '/pages/detail/detail?userId=' + this.userInfo.id
                })
            },
            getInviteCode() {
                this.$http.get('/user-invitation/getList?isUsed=false&userId=' + this.userInfo.id).then(res => {
                    let data = res.data || []
                    if (data.length > 0) {
                        this.inviteCode = data[0].code
                    }
                })
            },
            getVisitMe() {
                let param ={
                    visitUserId: this.userInfo.id,
                    neUserId: this.userInfo.id,
                    isRead: false
                }
                this.$http.get('/user-visit/getList',{params: param}).then(res => {
                    let data = res.data || []
                     this.visitCount = data.length
                })
            }
        },
      watch: {
        hasLogin(val){
          // 登录成功后刷新数据
          if (val === true) {
            this.getDetail()
            this.getInviteCode()
            this.$refs.loginPopup.close()
          }
        }
      }
    }
</script>

<style>

</style>
